interface Props {
	data: any;
}

import { Descriptions, Button, Tooltip, message } from "antd";
import styles from "./index.module.less";
import { SECOND_OPTIONS, SECOND_TAB_VALUES, formList, USE_RANGE_TABS } from "../../List/constant";
import { find, map } from "lodash";
import { useState } from "react";
import { CopyOutlined } from "@ant-design/icons";

export default (props: Props) => {
	const [copied, setCopied] = useState(false);
	const productTypeList = map(USE_RANGE_TABS, (item: any) => ({
		...item,
		label: item?.category_name,
		value: item?.category_id
	}));
	const info = props.data ?? {};
	const textToCopy = info?.code; // 需要复制的文本
	const handleCopy = () => {
		navigator.clipboard
			.writeText(textToCopy)
			.then(() => {
				setCopied(true);
				message.success("复制成功！");
				setTimeout(() => setCopied(false), 2000); // 2秒后重置复制状态
			})
			.catch(() => message.error("Failed to copy!"));
	};
	const items = [
		{
			key: "name",
			label: "优惠券名称",
			children: info?.name ?? "-",
			span: 1
		},
		{
			key: "code",
			label: "优惠券ID",
			render: () => {
				return (
					<div>
						<span>{info?.code ?? "-"}</span>
						<Tooltip title={copied ? "已复制" : "复制"}>
							<Button
								icon={<CopyOutlined />}
								onClick={handleCopy}
								style={{ marginLeft: 8, height: "22px", lineHeight: "22px" }}
								type="link"
							>
								复制
							</Button>
						</Tooltip>
					</div>
				);
			},
			span: 1
		},
		{
			key: "type",
			label: "优惠券类型",
			span: 1,
			render: () => {
				const data = find(SECOND_OPTIONS, (item: any) => item.key === info.type);
				return <span>{data?.label ?? "-"}</span>;
			}
		},
		{
			key: "use_status",
			label: "使用状态",
			render: () => {
				const data = find(formList, (item: any) => item.value === info.use_status);
				return <span>{data?.label ?? "-"}</span>;
			},
			span: 1
		},
		{
			key: "created_at",
			label: "创建时间",
			children: info?.created_at ?? "-",
			span: 1
		},
		{
			key: "time",
			label: "有效期",
			children: `${info?.start_time} 至 ${info?.end_time}`,
			span: 1
		},
		{
			key: "discount_val",
			label: "面额门槛",
			render: () => {
				return (
					<>
						{info.type === SECOND_TAB_VALUES.fullCut ? (
							<>
								满{info.format_min_order_amount}减{info.format_discount_amount}
							</>
						) : (
							<>{Number(info.discount_val) * 100}折</>
						)}
					</>
				);
			},
			span: 1
		},
		{
			key: "category_ids",
			label: "使用范围",
			children: info?.range ?? "-",
			render: () => {
				return productTypeList?.find(i => i?.value == info?.category_pid)?.label ?? "-";
			},
			span: 1
		},
		{
			key: "8",
			label: "每人限用",
			children: info?.single_use_per_user ?? "-",
			span: 1
		},
		{
			key: "9",
			label: "可使用次数",
			children: info?.max_uses ?? "-",
			span: 1
		}
	];
	return (
		<div className={styles.container}>
			<div className={styles.title}>基本信息</div>
			<div className={styles.content}>
				<Descriptions contentStyle={{ backgroundColor: "transparent" }}>
					{items.map((item: any) => (
						<Descriptions.Item label={item.label} key={item.key} span={item.span}>
							{item.render ? item.render(info[item.key]) : item.children}
						</Descriptions.Item>
					))}
				</Descriptions>
			</div>
		</div>
	);
};
